<template>
  <el-dialog title="编辑"  :close-on-click-modal="false" :visible.sync="show" 
  class="dialog_index dialog_banner site_fixed" :before-close="cancle">
    <el-form ref="form" v-loading="loading" class="faqTypeForm">
      <el-tabs type="card" v-model="activeName">
          <el-tab-pane :label="item.site" :name="item.site"   v-for="item  in formList" :key="item.id">
            <el-form-item label="FAQ一级类型：">
              <el-input  :placeholder="'FAQ一级类型('+item.site+')（必填项)'" v-model="item.faq_type"></el-input>
            </el-form-item>
            <el-form-item label="FAQ二级类型：">
              <el-input  :placeholder="'FAQ二级类型('+item.site+')（必填项)'" v-model="item.faq_second_type"></el-input>
            </el-form-item>
          </el-tab-pane>
      </el-tabs>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button type="search" @click="!isSubmit && submitForm()" :loading="isSubmit">保存</el-button>
      <el-button @click="cancle">取消</el-button>
    </span>
  </el-dialog>
</template>

<script>

import { editGet, editPost } from '@/api/support/faqType.js'
export default {
  props: {
    show: Boolean,
    closeAddDialog:Function,
    id:Number
  },
  data() {
    return {
      formList: [],
      loading: false,
      activeName: '',
      isSubmit: false

    }
  },
  watch: {
    show:function(){
      if(this.show){
        this.loading = true
        this.isSubmit = false
        this.getData()
      }
    }
  },
  methods:{
    getData () {
      let params = {
        faq_id: this.id
      }
      editGet(params).then(res => {
        if (res.status == 200) {
          let data = res.data
          this.formList= data
          if (data.length > 0){
           this.activeName = data[0].site
          }
           this.loading =false
        }
      })
    },
    submitForm(){
      let status = this.validateForm()
      if(status){
        this.postData()
      }
    },
    validateForm () {
      let list = this.formList
      let status = true
      for ( let i = 0; i < list.length; i++ ){
        if (list[i].faq_type === '') {
          this.$message.error('站点' + list[i].site + 'FAQ一级类型为必填项')
          status = false
          break
        }
        if (list[i].faq_type.length >= 50) {
          this.$message.error('站点' + list[i].site + 'FAQ一级类型最多50字符')
          status = false
          break
        }
        if (list[i].faq_second_type === '') {
          this.$message.error('站点' + list[i].site + 'FAQ二级类型为必填项')
          status = false
          break
        }
         if (list[i].faq_second_type.length >= 100) {
          this.$message.error('站点' + list[i].site + 'FAQ二级类型最多100字符')
          status = false
          break
        }
      }
      return status
    },
    
    postData(){
      this.isSubmit = true
      let params = {
        data: JSON.stringify(this.formList)
      }
      editPost(params).then(res=>{
        if(res.state == 1) {
          this.$message.success('编辑FAQ类型成功')
          this.cancle()
        }
       this.isSubmit = false
      })
    },
    cancle(){
      this.$emit('closeDialog')
    },
  }
}
</script>

<style lang="scss">

</style>